<template>
  <div
    class="app-logo"
    :style="{ width: size + 'px', height: size + 'px' }"
    @click="onClick"
  >
    <div
      class="image-container flex-center column-center"
      :style="{ 'border-radius': radius + 'px' }"
      :class="{ 'app-box-shadow': hasShadow }"
    >
      <img
        class="logo-image"
        :src="picUrl"
        :style="{ 'border-radius': radius + 'px' }"
        @error="handleError"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'appLogo',
  props: {
    /**
     * 图标大小，单位px
     */
    size: {
      type: [Number, String],
      default: () => {
        return 100;
      }
    },
    /**
     * 图片地址
     */
    src: {
      type: String,
      default: () => {
        return '';
      }
    },
    /**
     * 是否是本地图片
     */
    isLocal: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    /**
     * 默认图片是否有阴影
     */
    hasShadow: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    /**
     * 图片圆角，单位px
     */
    radius: {
      type: [Number, String],
      default: () => {
        return 0;
      }
    },
    previewAble: {
      type: Boolean,
      default: () => {
        return true;
      }
    },
    defaultImage: {
      type: String,
      default: () => {
        return '';
      }
    }
  },
  // 监听用户信息发生变化后，进行相关业务操作
  watch: {
    src: {
      handler(newVal, oldVal) {
        this.$log.info(newVal, oldVal);
        this.setImageUrl();
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      picUrl: '',
      defaultPic: this.defaultImage || this.$config.DEFAULT_PICTURE
    };
  },
  created() {
    this.setImageUrl();
  },
  methods: {
    handleError() {
      this.picUrl = this.defaultPic;
    },
    setImageUrl() {
      this.picUrl = this.isLocal
        ? this.$utils.getIconByTheme(this.src)
        : this.src;
    },
    onClick() {
      if (this.previewAble) {
        // TODO 计划预览图片
      } else {
        this.$emit('click');
      }
    }
  }
};
</script>

<style lang="scss"
       scoped>
.app-logo {
  overflow: hidden;

  .image-container {
    width: 100%;
    height: 100%;

    .logo-image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
